<template>
  <div>
    <div class="search">
      <el-input
        style="width: 200px; margin-right: 10px"
        size="small"
        v-model="form.carname"
        placeholder="请输入车辆名称"
      ></el-input>
      <el-button type="info" size="small" @click="chaxun()" plain
        >查询</el-button
      >
      <el-button type="warning" size="small" @click="chongzhi()" plain
        >重置</el-button
      >
      <el-button
        type="primary"
        @click="add()"
        style="float: right"
        size="small"
        plain
        >新增</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tabledata">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="车辆名称" prop="carname"></el-table-column>
        <el-table-column label="所属品牌" prop="name"></el-table-column>
                <el-table-column label="租金" prop="zj"></el-table-column>

        <el-table-column label="汽车icon" prop="carimg">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.carimg"
              :preview-src-list="[scope.row.carimg]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status == '0'">待租赁</span>

            <span v-if="scope.row.status == '1'">已租赁</span>

            <span v-if="scope.row.status == '2'">已下架</span>
          </template>
               </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
  <el-button type="primary" @click="bj(scope.row)" plain>编辑</el-button>
  <el-button type="danger" @click="shangjia(scope.row)" v-if="scope.row.status=='2'" plain>上架</el-button>
  <el-button type="danger" @click="xaijia(scope.row)" v-if="scope.row.status!=='2'" plain>下架</el-button>
</template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog width="30%" :title="title" :visible="dialogVisible">
      <el-form :model="form1">
        <el-form-item label="车辆名称">
          <el-input placeholder="请输入" v-model="form1.carname"></el-input>
        </el-form-item>
                <el-form-item label="所属品牌">
          <el-select placeholder="请输入" v-model="form1.ppid" style="width:100%">
          <el-option :label="item.name" v-for="item in ppdata" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
              <el-form-item label="租金">
          <el-input placeholder="请输入" v-model="form1.zj"></el-input>
        </el-form-item>
        <el-form-item label="车辆icon">
          <el-upload
            class="avatar-uploader"
            action="http://demonuxtapi.dishait.cn/admin/s/upload"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form1.carimg" :src="form1.carimg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="save()" type="primary">确定</el-button>
          <el-button plain @click="reset()" >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import service from '../request'

export default {
  data () {
    return {
      form: {
        carname: '',
        pageNum: 1,
        pageSize: 10
      },
      title: '新增',
      form1: {
        carimg: ''
      },
      dialogVisible1: false,
      dialogVisible: false,
      headers: {
        token:
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6IjQ1NioqKkBxcS5jb20iLCJwaG9uZSI6IjEzNyoqKio1NDQ5IiwiaWQiOjEsInVzZXJuYW1lIjoiY2VzaGkxIiwibmlja25hbWUiOiIiLCJwYXNzd29yZCI6IjA5MTNmYWIyOWY4YWE5MmY5N2ZlNjQ2ODM5NDA5ZjM3MjZjNGQzZGM2NGY0NDlmMTA2MjJhNTUwMGM3NDBjMDIiLCJhdmF0YXIiOiIiLCJ3ZWl4aW5fdW5pb25pZCI6bnVsbCwic2V4Ijoi5pyq55-lIiwiZGVzYyI6IiIsInN0YXR1cyI6MSwiY3JlYXRlZF90aW1lIjoiMjAyMS0wMi0yMVQxNDowNDowMi4wMDBaIiwidXBkYXRlZF90aW1lIjoiMjAyMy0xMC0wNFQxNjo0ODo0MC4wMDBaIiwiaWF0IjoxNjk4NTYyOTU4fQ.MLAxkr9JkR9lIxEZbufSuBDB_kz-GR8UYEvwB3NslcA',
        schoolid: '11'
      },
      total: 0,
      ppdata: [],
      tabledata: []
    }
  },
  mounted () {
    this.getpp()
    this.getdata()
  },
  methods: {
    shanchu (row) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await service.get(`/index/shanchupp`, {
            params: {
              id: row.id
            }
          })
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getdata()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    shangjia(row){
 this.$confirm('是否确认上架？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          row.status = 0
          const res = await service.post(`/index/carsave`, row)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '下架成功!'
            })
            this.getdata()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    xaijia (row) {
      this.$confirm('是否确认下架？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          row.status = 2
          const res = await service.post(`/index/carsave`, row)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '下架成功!'
            })
            this.getdata()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    reset () {
      this.form1 = {}
      this.dialogVisible = false
    },
    async save () {
      const res = await service.post('index/carsave', this.form1)
      if (res.code == 200) {
        this.$message.success(`${res.msg}`)
        this.dialogVisible = false
        this.getdata()
      }
    },
    add () {
      this.title = '新增'
      this.dialogVisible = true
      this.form1 = {
        carname: '',
        carimg: '',
        status: 0
      }
    },
    bj (row) {
      this.title = '编辑'
      this.dialogVisible = true
      this.form1 = JSON.parse(JSON.stringify(row))
    },
    handleAvatarSuccess (e) {
      console.log(e)
      this.form1.carimg = e.data
    },
    handleCurrentChange (e) {
      this.form.pageNum = e
      this.getdata()
    },
    handleSizeChange (e) {
      this.form.pageSize = e
      this.getdata()
    },
    fj (row) {
      this.form1 = JSON.parse(JSON.stringify(row))
      this.form1.fjly = ''
      this.form1.status = '1'
      this.dialogVisible1 = true
    },
    async fjqd () {
      const res = await service.post('/index/adduser', this.form1)
      console.log(res)
      if (res.code == 200) {
        this.$message.success('修改成功')
        this.dialogVisible1 = false
        this.getdata()
      }
    },
    async shenheqd () {
      const res = await service.post('/index/adduser', this.form1)
      console.log(res)
      if (res.code == 200) {
        this.$message.success('修改成功')
        this.dialogVisible = false
        this.getdata()
      }
    },
    sh (row) {
      this.form1 = JSON.parse(JSON.stringify(row))

      this.form1.status = ''
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleClose1 () {
      this.dialogVisible1 = false
    },
    chongzhi () {
      this.form = {
        carname: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getdata()
    },
    chaxun () {
      this.getdata()
    },
    async getpp () {
      const res = await service.get('/index/pinpaiall')
      console.log(res)
      this.ppdata = res.data
    },
    async getdata () {
      const res = await service.get('/index/carlist', {
        params: this.form
      })
      console.log(res)
      this.tabledata = res.data
      this.total = res.total
    }
  }
}
</script>
<style>
.el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
